<div class="row align-items-center justify-content-between">
    <div class="col-md-auto col-sm-auto">
        <div class="content-header">
            <h1>登录审计日志</h1>
        </div>
    </div>
</div>

<div class="box box-primary">
    <div class="box-body">
        <div class="loading-shade" *ngIf="dataSource.loading$ | async">
            <mat-spinner></mat-spinner>
        </div>
        <div class="table-container">
            <div class="ml-2 col-sm-5">
                <mat-form-field class="w-100">
                    <input matInput placeholder="根据用户名搜索" #input>
                </mat-form-field>
            </div>
            <table mat-table [dataSource]="dataSource" matSort matSortActive="loginTime" matSortDirection="desc">
                <ng-container matColumnDef="loginTime">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        日期/时间
                    </th>
                    <td mat-cell *matCellDef="let audit"> {{audit?.loginTime | date:"dd/MM/yyyy hh:mm:ss a"}} </td>
                </ng-container>
                <ng-container matColumnDef="userName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        邮箱
                    </th>
                    <td mat-cell *matCellDef="let audit"> {{audit.userName}} </td>
                </ng-container>
                <ng-container matColumnDef="status">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        状态
                    </th>
                    <td mat-cell *matCellDef="let audit">
                        <span *ngIf="audit?.status=='Success'" class="badge badge-success">{{audit?.status}}</span>
                        <span *ngIf="audit?.status=='Error'" class="badge badge-warning">{{audit?.status}}</span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="remoteIP">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> IP 地址 </th>
                    <td mat-cell *matCellDef="let audit"> {{audit.remoteIP}} </td>
                </ng-container>

                <ng-container matColumnDef="latitude">
                    <th mat-header-cell *matHeaderCellDef> 纬度</th>
                    <td mat-cell *matCellDef="let audit"> {{audit.latitude}} </td>
                </ng-container>

                <ng-container matColumnDef="longitude">
                    <th mat-header-cell *matHeaderCellDef> 经度 </th>
                    <td mat-cell *matCellDef="let audit"> {{audit.longitude}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true" style="background-color: #eee;">
                </tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
            <ng-container *ngIf="dataSource.count === 0">
                <div class="row">
                    <div class="col-sm-12 ml-4 mt-3">
                        <label class="font-weight-bold">没有找到数据</label>
                    </div>
                </div>
            </ng-container>
            <mat-paginator [length]="loginAuditResource.totalCount" [pageSize]="loginAuditResource.pageSize"
                [pageSizeOptions]="[15, 20, 30]"></mat-paginator>
        </div>
    </div>
</div>
